/**
* 框架公共区域换肤配置
*/

.commonUi(@headerBackground,@siderBackground,@contentBackground,@contentCardBackground,@scrollbar-bgColor,@scrollbar-bgColor-thumb,@scrollbar-bgColor-thumb-hover,@headerLogoColor) {
    .frame {
        &-header {
            background-color: @headerBackground;
        }
        &-sider {
            background-color: @siderBackground;
        }
        &-content {
            background-color: @contentBackground;
            &-card {
                background-color: @contentCardBackground;
            }
        }
        &-logo {
            background-color: @headerBackground;
            color: @headerLogoColor;
        }
    }

    // 滚动条样式修改

    // ::-webkit-scrollbar 滚动条整体部分
    // ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
    // ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
    // ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
    // ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
    // ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
    // ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
    body::-webkit-scrollbar,
    div::-webkit-scrollbar,
    ul::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }
    body::-webkit-scrollbar-track,
    div::-webkit-scrollbar-track,
    ul::-webkit-scrollbar-track {
        background: @scrollbar-bgColor;
        border-radius: 2px;
    }

    body::-webkit-scrollbar-thumb,
    div::-webkit-scrollbar-thumb,
    ul::-webkit-scrollbar-thumb {
        background: @scrollbar-bgColor-thumb;
        border-radius: 10px;
        &:hover {
            background: @scrollbar-bgColor-thumb-hover;
        }
    }
    body::-webkit-scrollbar-corner,
    div::-webkit-scrollbar-corner,
    ul::-webkit-scrollbar-corner {
        background: #179a16;
    }
}
